// 商品区轮播图特效
(function () {
    // 得到product区域轮播图列表，左按钮，右按钮的元素节点
    var product_left_btn = document.getElementById('product-left-btn');
    var product_nav_ul = document.getElementById('product-nav-ul');
    var product_right_btn = document.getElementById('product-right-btn');
    // 设置一个变量'li5'为轮播图列表子元素中第一个li标签的克隆
    var li5 = product_nav_ul.children[0].cloneNode(true);
    // 将'li5'这个元素节点放到DOM树上
    product_nav_ul.appendChild(li5);
    // 设置变量li5_pic为选择器为'.product .nav-box ul li:nth-child(6) a .pic-box'标签的元素节点
    var li5_pic = document.querySelector('.product .nav-box ul li:nth-child(6) a .pic-box');
    // 把li5_pic中的HTML内容改为'src=images/product06.png'
    li5_pic.innerHTML = '<img src="images/product06.png" alt="">';
    // 由于第5张图片下方的文字内容，和第1张图片下方的文字内容相同，因此不做更改
    // 以此类推，将包含剩余图片内容的li标签依次添加到HTML中
    var li6 = product_nav_ul.children[1].cloneNode(true);
    product_nav_ul.appendChild(li6);
    var li6_pic = document.querySelector('.product .nav-box ul li:nth-child(7) a .pic-box');
    li6_pic.innerHTML = '<img src="images/product07.png" alt="">';
    var li7 = product_nav_ul.children[2].cloneNode(true);
    product_nav_ul.appendChild(li7);
    var li7_pic = document.querySelector('.product .nav-box ul li:nth-child(8) a .pic-box');
    li7_pic.innerHTML = '<img src="images/product08.png" alt="">';
    var li8 = product_nav_ul.children[3].cloneNode(true);
    product_nav_ul.appendChild(li8);
    var li8_pic = document.querySelector('.product .nav-box ul li:nth-child(9) a .pic-box');
    li8_pic.innerHTML = '<img src="images/product09.png" alt="">';
    var li9 = product_nav_ul.children[4].cloneNode(true);
    product_nav_ul.appendChild(li9);
    var li9_pic = document.querySelector('.product .nav-box ul li:nth-child(10) a .pic-box');
    li9_pic.innerHTML = '<img src="images/product10.png" alt="">';
    // 设置一个全局变量n，值为当前轮播图显示出的第一张图片所在的li标签元素节点的下标，值依次为0，1，2，3，4，5
    var n = 0;
    // 设置一个变量lock，为一个函数节流锁
    var lock = true;
    // 给右按钮设置事件监听
    product_right_btn.onclick = function () {
        // 当lock为false时，退出函数
        if (!lock) return;
        lock = false;
        // 每当点击右按钮时让n的值加1
        n++;
        if (n > 5) n = 5;
        // 将轮播图列表的样式根据当前n的值设置left属性的值
        product_nav_ul.style.left = -n * 221 + 'px';
        // 设置一个定时器，在500ms后将lock的值变为true
        setTimeout(function () {
            lock = true;
        }, 500);
    }
    // 给左按钮设置事件监听
    product_left_btn.onclick = function () {
        if (!lock) return;
        lock = false;
        // 每当点击左按钮时让n的值减1
        n--;
        if (n < 0) n = 0;
        product_nav_ul.style.left = -n * 221 + 'px';
        setTimeout(function () {
            lock = true;
        }, 500);
    }
})();